<template>
  <el-dialog
    :before-close="handleClose"
    :close-on-click-modal="false"
    title="创建新用户"
    :visible.sync="dialogVisible"
  >
    <el-form
      ref="ruleForm"
      v-loading="loading"
      label-width="100px"
      :model="ruleForm"
      :rules="rules"
      size="mini"
    >
      <el-form-item label="姓氏" prop="user_last_name">
        <el-input
          v-model="ruleForm.user_last_name"
          placeholder="请输入姓氏"
          spellcheck="false"
        />
      </el-form-item>
      <el-form-item label="名" prop="user_first_name">
        <el-input
          v-model="ruleForm.user_first_name"
          placeholder="请输入名"
          spellcheck="false"
        />
      </el-form-item>

      <el-form-item label="管理员">
        <el-switch v-model="ruleForm.user_org_manager" />
      </el-form-item>
      <div>
        <el-form-item v-permission="['super']" label="超级管理员">
          <el-switch v-model="ruleForm.reversed_1" />
        </el-form-item>
      </div>

      <div>
        <el-form-item v-permission="['super']" label="组织" prop="user_org_id">
          <el-select v-model="ruleForm.user_org_id" filterable>
            <el-option
              v-for="(item, index) in org_list"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </div>

      <el-form-item label="邮箱" prop="user_email">
        <el-input
          v-model="ruleForm.user_email"
          placeholder="请输入邮箱"
          spellcheck="false"
        />
      </el-form-item>
      <el-form-item label="密码" prop="user_pass">
        <el-tooltip>
          <div slot="content">
            1. 密码长度需大于12位<br />
            2. 密码需同时包含大小写英文字符、数字与特殊符号<br />
            3. 密码中不允许出现任何全角字符
          </div>
          <el-input
            v-model="ruleForm.user_pass"
            placeholder="请输入密码"
            type="password"
          />
        </el-tooltip>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirm_password">
        <el-input
          v-model="ruleForm.confirm_password"
          placeholder="再一次输入密码"
          type="password"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit('ruleForm')">保存</el-button>
        <el-button @click="dialogVisible = false">返回</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import org from "@/api/org";
import clearWatch from "@/utils/mixin/clearWatch";
import user from "@/api/user";
import { mapGetters } from "vuex";
export default {
  name: "NewUser",
  mixins: [clearWatch],
  data() {
    return {
      dialogVisible: false,
      loading: false,
      org_list: [],
      ruleForm: {
        user_last_name: "",
        user_first_name: "",
        user_org_manager: false,
        user_org_id: "",
        user_email: "",
        user_pass: "",
        confirm_password: "",
        reversed_1: false
      },
      rules: {
        user_last_name: [
          { required: true, message: "请输入姓氏", trigger: "blur" }
        ],
        user_first_name: [
          { required: true, message: "请输入名", trigger: "blur" }
        ],
        user_org_id: [
          { required: true, message: "请选择组织", trigger: "change" }
        ],
        user_email: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) return callback(new Error("请输入邮箱"));
              const expression = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
              if (!expression.test(value)) return callback("请输入正确的邮箱");
              callback();
            },
            trigger: "blur"
          }
        ],
        user_pass: [{ required: true, message: "请输入密码", trigger: "blur" }],
        confirm_password: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) return callback(new Error("请输入确认密码"));
              if (value !== this.ruleForm.user_pass)
                return callback(new Error("两次输入密码不一致"));
              callback();
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: mapGetters(["UserInfo"]),
  methods: {
    handleClose(done) {
      done();
    },
    async show() {
      this.dialogVisible = !this.dialogVisible;
      this.loading = true;
      if (this.UserInfo.role_en === "super") {
        await this.loadingData();
      } else {
        this.ruleForm.user_org_id = this.UserInfo.org_id;
      }

      this.loading = false;
    },
    loadingData() {
      return org
        .org_name_list()
        .then(res => {
          this.org_list = res.data.name_list;
        })
        .catch(() => {
          return false;
        });
    },

    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = Object.assign({}, this.ruleForm);
          data.user_org_manager = Number(data.user_org_manager);
          data.reversed_1 = Number(data.reversed_1);
          user.create(data).then(res => {
            this.$message.success(res.data.message);
            this.$emit("change");
            this.dialogVisible = false;
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
